<template>
	<view class="storeSearch">
		<n-loading></n-loading>
		<view class="topSearch">
			<view class="search">
				<u-icon name="search" color="#999" size="32"></u-icon>
				<input type="text" :value="storeName" @input="intGo" placeholder="输入关键词搜索商家" />
			</view>
		</view>
		<!-- 品牌 -->
		<view class="pd32">
			<!-- 品牌 -->
			<!-- <view class="brandBox">
				<view class="brandInfo">
					<dh-image class="shopLogo" src="https://lovebirdopen.com/static/img/cBj/dPicture.png" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<text class="shopName">小龙火锅</text>
					<text class="shopLabel">品牌</text>
				</view>
				<image class="acImg" src="https://lovebirdopen.com/file/2021/01/5a287970925b93c4ee6525e2f8218aba.jpg" mode=""></image>
			</view> -->
			<!-- 商家列表 -->
			<view class="shopList" v-if="areadyState">
				<view class="nodata" v-if="storeList.length==0">
					<image src="../../static/svgIcon/noStore.svg" mode=""></image>
					<view class="tips">暂无商品~</view>
				</view>
				<view class="eachShop" v-for="(item,index) of storeList" :key="index">
					<dh-image class="shopLogo" :src="item.logo" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="leftCont">
						<view class="shopName" @tap="goStoreInfo(item.id)">
							<text class="brand" v-if="item.is_brand==1">品牌</text>{{item.name}}
						</view>
						<view class="shopInfo">
							<u-icon name="clock" color="#333" size="24"></u-icon>
							{{timeRange(item.open_time.start_at,item.open_time.end_at,dateType(2)) == true?'正在营业':'暂停营业'}}
							<text class="text">{{item.type_name==null?'':item.type_name}}</text>
							<text class="text">{{item.visitor}}人到店</text>
						</view>
						<view class="shopArea">
							{{item.circle==null?'':item.circle}}
							<text>{{item.distance}}km</text>
						</view>
						<view class="shopCoupons"v-if="item.activities.coupon!=null">
							<view class="coupon" v-for="(v,i) of item.activities.coupon" :key="i">
								<text class="ident">券</text>
								{{v.name}}
							</view>
						</view>
						<view class="shopGoods" v-if="item.activities.activity!=null">
							<scroll-view scroll-x="true" class="imgBrowse">
								<view class="goodsEach" v-for="(v,i) of item.activities.activity" :key="i" @tap="goInfo(v.id)">
									<image class="goodsImg" :src="v.image" mode=""></image>
									<view class="goodsName ellipsis">{{v.name}}</view>
									<view class="sold">已售{{v.buy_count}}</view>
									<view class="price">
										<text class="unit">¥</text>
										{{v.price}}
										<text class="rebate" v-if="v.discount!=1">{{v.discount}}折</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeName:'',
				// 请求参数
				areadyState:null,
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				storeList:[],
				lat:0,//
				lon:0,//
			}
		},
		onLoad: function (option) {
			this.isGetLocation();
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.getStoreList()
			}
		},
		methods: {
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStoreList() {
				this.apiget('/shop/store-front/search-store',{page:this.page,pageSize:this.pageSize,title:this.storeName,lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200) {
						this.storeList = this.storeList.concat(res.data.data.list);
						this.areadyState = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			// 商品详情跳转
			goInfo(id){
				uni.navigateTo({
					url: '/pages/index/goodsInfo?id='+id
				});
			},
			// 商家详情跳转
			goStoreInfo(id){
				uni.navigateTo({
					url: './storeInfo?id='+id
				});
			},
			intGo(e){
				this.storeName = e.detail.value;
				this.page = 1;
				this.storeList = [];
				this.areadyState = null;
				this.getStoreList();
			},
		}
	}
</script>

<style lang="scss">
	.storeSearch{
		min-height: 100%;
		padding-top: 96rpx;
		background: #F8F8FA;
	}
	.topSearch{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		padding: 10rpx 32rpx;
		background-color: #fff;
		.search{
			display: flex;
			height: 60rpx;
			align-items: center;
			background: #F8F8FA;
			border-radius: 36rpx;
			
			u-icon{
				margin: 0 16rpx 0 24rpx;
			}
		
			input{
				flex: 1;
				height: 60rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.pd32{
		padding: 0 32rpx;
	}
	.brandBox{
		width: 100%;
		margin-bottom: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.brandInfo{
			display: flex;
			height: 96rpx;
			align-items: center;
			.shopLogo{
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.shopName{
				margin-right: 8rpx;
				font-size: 32rpx;
				color: #333333;
			}
			.shopLabel{
				padding: 0px 8rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #000000;
				background: linear-gradient(103.19deg, #FFC738 3.8%, #FFBB38 96.2%);
				border-radius: 8rpx;
			}
		}
		.acImg{
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
	
	.shopList{
		.eachShop{
			display: flex;
			padding: 24rpx 0 24rpx 24rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.03);
			border-radius: 16rpx;
			.shopLogo{
				width: 84rpx;
				height: 84rpx;
				margin-right: 24rpx;
				border-radius: 4rpx;
				overflow: hidden;
			}
			.leftCont{
				flex: 1;
				width: 1px;
				.shopName{
					margin-bottom: 6rpx;
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333333;
					.brand{
						padding: 0 8rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						color: #000000;
						background: linear-gradient(103.19deg, #FFC738 3.8%, #FFBB38 96.2%);
						border-radius: 8rpx;
					}
				}
				.shopInfo{
					margin-bottom: 8rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #333333;
					u-icon{
						margin-right: 6rpx;
					}
					.text{
						margin-left: 16rpx;
						color: #666;
					}
				}
				.shopArea{
					height: 40rpx;
					padding-right: 24rpx;
					margin-bottom: 4rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666666;
					.text{
						float: right;
						color: #333333;
					}
				}
				.shopCoupons{
					margin-bottom: 24rpx;
					.coupon{
						display: inline-block;
						padding: 4rpx;
						font-size: 20rpx;
						line-height: 32rpx;
						color: #FF5238;
						background: rgba(255, 82, 56, 0.12);
						border-radius: 42rpx;
						.ident{
							display: inline-block;
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;
							color: #fff;
							text-align: center;
							background: #FF5238;
							border-radius: 50%;
						}
					}
				}
				.shopGoods{
					height: 280rpx;
					.imgBrowse {
					    width: calc(100%-1px);
						height: 280rpx;
					    display: -webkit-box;
					    display: -webkit-flex;
					    display: flex;
					    -webkit-box-align: center;
					    -webkit-align-items: center;
					    align-items: center;
					    white-space: nowrap;
						
						.goodsEach{
							display: inline-block;
							height: 280rpx;
							width: 200rpx;
							margin-right: 8rpx;
							.goodsImg{
								width: 100%;
								height: 140rpx;
								margin-bottom: 16rpx;
								border-radius: 8rpx;
								overflow: hidden;
							}
							.goodsName{
								font-size: 24rpx;
								line-height: 30rpx;
								color: #333333;
							}
							.sold{
								margin-bottom: 18rpx;
								font-size: 24rpx;
								line-height: 30rpx;
								color: #999999;
							}
							.price{
								font-size: 32rpx;
								line-height: 44rpx;
								color: #FF5238;
								.unit{
									font-size: 24rpx;
								}
								.rebate{
									margin-left: 8rpx;
									padding: 0 8rpx;
									font-size: 20rpx;
									line-height: 28rpx;
									background: rgba(255, 82, 56, 0.12);
									border-radius: 22rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	
	
	
	
	
</style>
